<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    *{ padding: 0; margin: 0; list-style-type: none;}
    .cont{ width: 1000px; margin: 0 auto; background-color: rgb(red, green, blue);}
    .lunbo{ width:1000px; height: 500px; background-color: #eee; margin: 80px auto;position: relative; overflow: hidden;}
    .lunbopic{ width: 100%; height: 100%; position: relative; padding:0 50px; box-sizing: border-box;}
    .lunbopic a{ width: 86%; height: 100%; display: block; position: absolute; left: 7%; top: 0; transition: all 1s;}
    .lunbopic a img{ width: 100%; height: 100%; object-fit: cover;}
    .lunboDoc{position: absolute; width: 100%; height: 50px; display: flex;flex-direction: row;justify-content: space-between; align-items: center; left: 0; top: 50%; transform: translateY(-25px); z-index: 30;}
    .lunboDoc span{ display: block; width: 80px; height: 100%; background-color: red; border-radius: 2px 15px; display: flex; justify-content: center; align-items: center; cursor: pointer; }
</style>
<body>
    <div class="cont">
        <div class="lunbo">
             <div class="lunbopic">
                  <a><img src="pexels-photo-17975892.jpeg" alt=""></a>
                  <a><img src="pexels-photo-17975892.jpeg" alt=""></a>
                  <a><img src="pexels-photo-17975892.jpeg" alt=""></a>
                  <a><img src="pexels-photo-17975892.jpeg" alt=""></a>
                  <a><img src="pexels-photo-17975892.jpeg" alt  =""></a>
                  <a><img src="pexels-photo-17975892.jpeg" alt=""></a>
             </div>
             <div class="lunboDoc">
                <span class="prev">prev</span>
                <span class="next">next</span>
             </div>
        </div>
    </div>
    <script>
        let lunbopic = document.querySelectorAll('.lunbopic a');
        let prev = document.querySelector('.prev');
        let next = document.querySelector('.next');
        let lunbo = document.querySelector('.lunbo');
        let indexNum = 3;
        layout();
        function layout(){
            let offsetWidth = 800;
            for(let i = 0; i < lunbopic.length; i++){
                let offsetX = (i - indexNum) * offsetWidth + 'px';
                let scorl = indexNum === i ? 1 : 0.8;
                lunbopic[i].style.transform = 'translateX(' + offsetX + ') scale('+scorl+')';
                lunbopic[i].style.zIndex = 12;
            }
        }
        prev.onclick = function(){
            clearInterval(timer);
            indexNum--;
            if(indexNum < 0){
                indexNum = lunbopic.length - 1;
            }
            layout();
        }
        next.onclick = function(){
            clearInterval(timer);
            indexNum++;
            if(indexNum > lunbopic.length - 1){
                indexNum = 0;
            }
            layout();
        }
        let timer = setInterval(function(){
            indexNum --;
            if(indexNum < 0){
                indexNum = lunbopic.length - 1;
            }
            layout();
        },2000)
        lunbo.addEventListener('onmouseover',function(){
            clearInterval(timer);
        })
    </script>
</body>
</html>